<template>
  <div class="box">

    <heads title="搜索"></heads>
    <van-search v-model="title" placeholder="请输入搜索关键词" />
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <template v-if="listaa.length > 0">
        <van-card v-for="(v, i) in listaa" :key="i" :price="v.goods_price" :title="v.goods_name" thumb="" @click="yy(v.goods_id)">
          <template #thumb>
            <img style="width: 6rem;height: 6rem;"
              :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
              alt="" srcset="">
          </template>
        </van-card>

      </template>
      <template v-else>
        <van-empty description="暂无数据" />
      </template>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { showToast } from 'vant';
import { searchApis } from "@/api/api"
import heads from '@/components/head.vue';
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
let title = ref(route.query.name)

let listaa = ref('')
const aa = () => {
  searchApis(title.value).then(res => {
    listaa.value = res.data.message.goods
  })
}
aa()

import _ from "lodash"
watch(title, _.debounce((newValue, oldValue) => {
  aa()
}, 1000))


const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    showToast('刷新成功');
    loading.value = false;
    aa()
  }, 1000);
};

const yy=(goods_id)=>{
  router.push({path:'/detail',query:{goods_id:goods_id}})
}
</script>

<style lang="scss" scoped>
.box {
  overflow: auto;
}
</style>